<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <shopcar></shopcar>
    <carinfo></carinfo>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    Vue.component('shopcar', {
      template: `
      <div style="width:400px; border: 1px solid red;">
        <input type="text" v-model="goodname">
        <button @click="add">添加</button>
        <ul>
          <li v-for="item in cars">{{item}}</li>
        </ul>
      </div>
      `,
      data: function() {
        return {
          cars:[],
          goodname:''
        }
      },
      methods: {
        add: function(){
          this.cars.push(this.goodname)
          this.goodname = ""
        }
      }
    });
    Vue.component('carinfo',{
      template: `
        <div>
          购物车的数量为: {{num}}个
        </div>
      `,
      data: function() {
        return {
          num: 0
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
    /**
      已知shopcar是一个组件, 内部可以往购物车中添加商品, 添加完商品之后, 列表会更新
      一直carinfo是一个组件, 组件中展示出购物车的数量信息
      要求: 将shopcar中的cars数组的数量,传递给carinfo组件中的num.
      方式: shopcar-->vm-->carinfo
    **/
  </script>
</body>
</html>
